import {ArticleData} from '@/services/front/article';
import {Card, CardMedia, CardContent, CardActions, Typography, Chip, Box} from '@mui/material';
import {format} from 'date-fns';
import {useTheme} from "@mui/material/styles";
import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
import { useNavigate } from 'react-router-dom';

export default function ArticleCard(articleData: ArticleData) {
    const theme = useTheme();
    const navigate = useNavigate();

    const handleCardClick = () => {
        navigate(`/dashboard/articles/${articleData.id}`);
    };

    return (
        <Card
          onClick={handleCardClick}
          sx={{
            display: 'flex',
            flexDirection: 'column',
            aspectRatio: '479/400',
            maxHeight: '100%',
            bgcolor: theme.palette.background.paper,
            color: theme.palette.text.primary,
            transition: 'box-shadow 0.3s, transform 0.3s, background 0.3s, color 0.3s',
            overflow: 'hidden',
            boxShadow: theme.palette.mode === 'light'
              ? '8px 12px 32px -8px rgba(80,80,80,0.13)'
              : '8px 12px 32px -8px rgba(0,0,0,0.36)',
            '&:hover': {
              boxShadow: theme.palette.mode === 'light'
                ? '16px 24px 48px -8px rgba(80,80,80,0.22)'
                : '16px 24px 48px -8px rgba(0,0,0,0.48)',
              transform: 'scale(1.025)',
              cursor: 'pointer'
            }
          }}
        >
            {/* 上半部分 - 图片区域 (占44.44%高度) */}
            <Box sx={{
                height: '60%',
                overflow: 'hidden'
            }}>
                <CardMedia
                    component="img"
                    image={articleData.titleImage}
                    alt={articleData.title}
                    sx={{
                        width: '100%',
                        height: '100%',
                        objectFit: 'fill'
                    }}
                />
            </Box>

            {/* 下半部分 - 内容区域 (占55.56%高度) */}
            <CardContent sx={{
                flex: 0.2,
                display: 'flex',
                flexDirection: 'column',
                p: 2,
                pb: 0,
            }}>
                {/* 标签 */}
                {articleData.tags.length > 0 && (
                    <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5, mb: 1}}>
                        {articleData.tags.map(tag => (
                            <Chip key={tag.id} label={tag.name} size="small"/>
                        ))}
                    </Box>
                )}

                {/* 标题 */}
                <Typography variant="h5" noWrap sx={{
                    mb: 1,
                    color: theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'
                }}>
                    {articleData.title}
                </Typography>

                {/* 描述 */}
                <Typography variant="body2" sx={{
                    color: theme.palette.mode === 'light' ? '#1976d2' : '#90caf9',
                    opacity: 0.8,
                    display: '-webkit-box',
                    WebkitLineClamp: 2,
                    WebkitBoxOrient: 'vertical',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    mb: 1,
                    lineHeight: 1.5,
                    minHeight: '3em'
                }}>
                    {articleData.description}
                </Typography>
            </CardContent>
            <CardActions sx={{
                display: 'flex',
                justifyContent: 'flex-end',
                alignItems: 'center',
                gap: 1,
                flex: 0.5,
                minHeight: 24,
                p: 1
            }}>
                {/* 底部信息 (日期与分类并排) */}
                <Box sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                }}>
                    <Typography variant="body2">
                        {format(new Date(articleData.createTime), 'yyyy-MM-dd')}
                    </Typography>
                </Box>
                <Box sx={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 0.5
                }}>
                    <FolderOutlinedIcon sx={{
                        color: '#FFD700', // 黄色
                        fontSize: 'baby2'
                    }}/>
                    <Typography variant="body2" sx={{color: theme.palette.mode === 'light' ? '#1976d2' : '#90caf9',}}>
                        {articleData.category.name}
                    </Typography>
                </Box>
            </CardActions>
        </Card>
    );
}
